<template>
	<view @touchmove.stop.prevent="stopRoll" class="stopRoll">
		<view @touchmove.prevent>
			<view class="bck" v-if="searchUpdateShows">
				<view class="bckCont">
					<view class="skipBtn" :style="`top:${top}rpx`" v-if="!typeBack" @tap="onSkipBtn()">
						跳过引导
					</view>
					<view class="rule" v-if="!!~nowImgUrl" @click="onClick()">
						<!-- <view class="ruleImg" :style="`background: url(${nowImgUrl.url});`"></view> -->
						<!-- <view class="ruleImg" :style="`background: url(${nowImgUrl.url})  0% 26% / cover  no-repeat;`"></view> -->

						<image :src="nowImgUrl.url" style="width: 100%;height: 100vh;" mode="aspectFill"></image>
					</view>
					<view class="clicksSkip" v-if="!typeBack">
						点击任意位置引导
					</view>
				</view>
				<example-popup ref="examplePopups" @cancel="onCancel" @success="onSuccess"></example-popup>
			</view>
		</view>
	</view>
</template>
<script>
	import {
		special_effects_revise
	} from '@/api/collection.js'
	import examplePopup from '@/pages/town/components/examplePopup.vue';
	import {
		guideImg
	} from '@/pages/town/common/command.js';
	export default {
		props: {
			// animationName: {
			// 	type: String,
			// 	default: ''
			// }
		},
		components: {
			examplePopup
		},
		mounted() {},
		data() {
			return {
				searchUpdateShows: false,
				time: 4,
				setIntervals: '',
				animations: '', //动画名称
				distinguish: '', //动画页面
				nowImgUrl: {}, //当前执行图
				nowIndex: 0, //当前执行下标
				guideImg: guideImg, //引导动画图
				typeBack: false, //是否确认退出
				top: 80
			};
		},
		methods: {
			//跳过引导
			onSkipBtn() {
				this.$refs.examplePopups.onTipsrunt(true, '是否确认要跳过引导', `本次功能为核心功能，建议观看完整引导`, {
					textOne: '确认跳过',
					textTwo: '继续观看'
				})
			},
			//点击跳过
			onCancel() {
				this.$refs.examplePopups.onSwitch(9, 'close')
				this.typeBack = true
				this.nowImgUrl.url = '/static/ble/guideImg/imgItem/6.jpg'
				this.$forceUpdate()
			},
			//关闭
			onSuccess() {
				this.$refs.examplePopups.onSwitch(9, 'close')
			},
			stopRoll() {},
			//将数组图片进行赋值 并开始显示第一张引导
			onOpen(distinguisName, animationNames) {
				this.distinguish = distinguisName
				this.animations = animationNames
				switch (this.animations) {
					case 'town_index_rule':
						this.nowImgUrl = this.guideImg.imgItem[0]
						break;
					case 'town_index_hardware':
						this.nowImgUrl = this.guideImg.imgItemTwo[0]
						break;
					case 'town_prop_details':
						this.nowImgUrl = this.guideImg.imgItemThree[0]
						break;
					case 'town_control_details':
						this.nowImgUrl = this.guideImg.imgItemFor[0]
						break;
					default:
						break;
				}
				this.searchUpdateShows = true
			},
			onClose() {},
			//引导点击下一步
			onClick() {
				let arr = []
				if (this.typeBack) {
					this.onUpdateAnimation();
				} else {
					this.nowIndex++
					if (this.animations == 'town_index_rule') {
						switch (this.nowIndex) {
							case 2:
								this.top = 360
								break;
							case 3:
								this.top = 500
								break;
							case 4:
								this.top = 80
								break;
							default:
								break;
						}
						arr = this.guideImg.imgItem
					} else if (this.animations == 'town_index_hardware') {
						arr = this.guideImg.imgItemTwo
					} else if (this.animations == 'town_prop_details') {
						arr = this.guideImg.imgItemThree
					} else if (this.animations == 'town_control_details') {
						switch (this.nowIndex) {
							case 1:
								this.top = 340
								break;
							case 2:
								this.top = 80
							default:
								break;
						}
						arr = this.guideImg.imgItemFor
					}
				}
				console.log(arr)
				if (this.nowIndex < (arr.length - 1)) { //若还有下一张则继续引导
					this.nowImgUrl = arr[this.nowIndex]
				} else if (this.nowIndex == (arr.length - 1)) { //若是最后一张
					this.nowImgUrl = arr[this.nowIndex]
					this.typeBack = true
					console.log(111, this.nowIndex)
					this.$forceUpdate()
				} else if (!this.typeBack) { //若用户引导结束
					this.onUpdateAnimation();
				}
			},
			onGoto(type) {
				if (type == 1) {
					uni.navigateTo({
						url: './search/searchIndex'
					})
				}
			},
			//动画引导结束
			async onUpdateAnimation(type) {
				this.searchUpdateShows = false
				try {
					const res = await special_effects_revise({
						distinguish: this.distinguish,
						special_effects: this.animations
					})
					this.$emit('guideEnd')
				} catch (e) {
					this.onGoto(type)
					console.log(e)
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.ruleImg {
		height: 100vh;
		width: 100%;
		background-size: 100% 100%;
		background-repeat: no-repeat;
	}

	.skipBtn {
		position: absolute;
		right: 40rpx;
		z-index: 100000;
		background: #252525;
		color: #727272;
		font-size: 24rpx;
		border-radius: 50px;
		padding: 10rpx 20rpx;
	}

	.clicksSkip {
		position: absolute;
		z-index: 100000;
		color: #6a6a6a;
		bottom: 50rpx;
		left: 0;
		right: 0;
		width: 400rpx;
		margin: auto;
		text-align: center;
		font-size: 24rpx;
		animation: triangleAnimation 2s ease;
		animation-iteration-count: infinite;
	}

	.bck {
		width: 100%;
		height: 100vh;
		background: rgba(0, 0, 0, 0.9);
		position: fixed;
		z-index: 99999;
		top: 0;
		transition: all .5s;

		.bckCont {
			position: relative;
		}
	}

	forwards {
		@keyframes triangleAnimation {
			0% {
				color: #6a6a6a;
			}

			50% {
				color: #B5B5B4;
			}

			100% {
				color: #6a6a6a;
			}
		}

	}
</style>
